From f714500b8de913669da006e8b933a2ffe4e483e6 Mon Sep 17 00:00:00 2001
From: Daniel Boles <dboles@src.gnome.org>
Date: Sat, 16 Sep 2017 17:02:24 +0100
Subject: [PATCH] Adwaita: Fix color of focus outline on colorswatch
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

The focus outline disappeared as the colour of the swatch got close to
the normal focus outline colour, which is alpha(currentColor, 0.3).

Fix by making the outline an alpha’d version of the tick colour, but
more opaque than normal outlines. 0.6 seems good enough; feel free to
improve it, but at least this ensures the outline can’t vanish anymore.

HighContrast achieves this already because it applies the color property
to the main node, not the overlay. Doing that means the outline is fully
opaque, which is fine for HC obviously but was excessive for Adwaita.

https://bugzilla.gnome.org/show_bug.cgi?id=787757
---
 gtk/theme/Adwaita/_common.scss           | 24 ++++++++++++++++--------
 gtk/theme/Adwaita/gtk-contained-dark.css |  4 ++++
 gtk/theme/Adwaita/gtk-contained.css      |  4 ++++
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d03dd99125..4901c1fe32 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4079,20 +4079,28 @@ colorswatch {
     }
   }
 
-  &.dark overlay {
-    color: white;
+  &.dark {
+    outline-color: transparentize(white, 0.4);
+
+    overlay {
+      color: white;
 
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
+      &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
 
-    &:backdrop { color: transparentize(white, 0.5); }
+      &:backdrop { color: transparentize(white, 0.5); }
+    }
   }
 
-  &.light overlay {
-    color: black;
+  &.light {
+    outline-color: transparentize(black, 0.4);
 
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
+    overlay {
+      color: black;
+
+      &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
 
-    &:backdrop { color: transparentize(black, 0.5); }
+      &:backdrop { color: transparentize(black, 0.5); }
+    }
   }
 
   &:drop(active) {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 6d582fa941..70db241a39 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1760,12 +1760,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius
 
 colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
 
+colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); }
+
 colorswatch.dark overlay { color: white; }
 
 colorswatch.dark overlay:hover { border-color: #1b1f20; }
 
 colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); }
 
+colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); }
+
 colorswatch.light overlay { color: black; }
 
 colorswatch.light overlay:hover { border-color: #1b1f20; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 3584f3692f..1bed44af6e 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1780,12 +1780,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius
 
 colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
 
+colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); }
+
 colorswatch.dark overlay { color: white; }
 
 colorswatch.dark overlay:hover { border-color: rgba(0, 0, 0, 0.8); }
 
 colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); }
 
+colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); }
+
 colorswatch.light overlay { color: black; }
 
 colorswatch.light overlay:hover { border-color: rgba(0, 0, 0, 0.5); }
-- 
2.30.2